{include file="public/header"}
    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
    </style>
    {include file="public/style"}
            <el-card style="width: 80%;" >   
                <el-breadcrumb separator="/">
                    <el-breadcrumb separator="/">
                        <el-page-header @back="goBack"  content="权限分组"></el-page-header>
                    </el-breadcrumb>        
                </el-breadcrumb>
            </el-card>
            <br> 
            <el-card style="width: 80%;" >   
                <div style="width: 80%;">    
                <h3 style="margin-left: 40%; font-family: '仿宋'">当前为-<span style="color: #409EFF;">{{title}}</span>-权限组分配权限</h3>
                </div>
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">    
                    <div style="margin-left: 15px;">    
                        <template style="margin-top: 50px;">   
                            <el-tree  :data="menulist"  show-checkbox  default-expand-all="true" node-key="value":props="defaultProps" :default-checked-keys="checkedKeys" @check-change="handleCheckChange"></el-tree>
                        </template>  
                        <el-form-item style="margin-top: 30px;">
                            <el-button type="primary" @click="checkSubmits">确认</el-button>
                        </el-form-item>
                    </div>      
                </el-form> 
            </el-card>
        </div>      

        <script>
            new Vue({
                el: '#app',
                data: function () {
                    return { 
                        title: '{$title}',
                        checkedKeys:[],
                        menulist: [],
                        searchForm:{
                            id: {$id},
                        },
                        createForm:{
                            rules:[],       
                            id: {$id}   
                        },  
                    }
                },
                mounted(){           
                this.getDatalist()
                this.getlist()
                },
                methods: {        
                    //返回上一个页面
                    goBack() {              
                        window.location.href = '/admin/authgroups/index';
                    },
                    async getDatalist() {
                        const res = await axios.post('/admin/menu/list')
                            if (res.status !== 1) {
                                return this.$message.error(res.info);
                            }
                        this.menulist = res.info
                        console.log(this.menulist)

                    },
                    //tree选中
                    handleCheckChange(data, checked, indeterminate) {
                        console.log(this.createForm.rules)
                        if(!data.children) {
                            console.log(data, checked)

                            if(checked) {
                                if(!this.createForm.rules.some((e) => data.value == e)) {
                                    this.createForm.rules.push(data.value)
                                }
                            } else {
                                let index = this.createForm.rules.findIndex((v)=>v == data.value)
                                if(index >= 0) {
                                    this.createForm.rules.splice(index, 1)
                                }
                            }

                        }
                    },
                    async getlist() {
                        let loading = this.$loading({
                            lock: true,
                            text: '数据加载中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        const res = await axios.post('/admin/authgroups/purview', {params: this.searchForm})
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    
                        this.checkedKeys =res.info|| []

                    },
                    //tree数据格式化
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },
                
                    //确认提交修改
                    async checkSubmits(){
                        this.$refs.refsearchForm.validate(async valid => {
                            if (!valid) return;
                            let loading = this.$loading({
                                lock: true,
                                text: '数据加载中···',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                                    });
                            axios.post('/admin/authgroups/create_purview', {params: this.createForm}).then(res => {
                                loading.close()
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);                  
                                }
                            
                                this.$message.success('操作成功');
                                this.ismenudialogVisible = false
                                this.getlist()
                            }).catch(err => {
                                console.log(err)
                            })
                        })
                    },
                
                }
            })
        </script>
    </body>  
</html>
